<template>
  <el-dialog v-model="showStopWork" width="600px" center :show-close="false">
    <template #header>
      <div class="header">
        <title-view title="停工申请" />
        <el-icon size="16px" style="cursor: pointer" @click="handleCancel"><Close /></el-icon>
      </div>
    </template>
    <div class="customer-info">{{ customerInfo.customerName }}丨{{ customerInfo.address }}</div>
    <el-form class="form" ref="formRef" :model="formData" :rules="formRule" label-width="150px" v-loading="isLoading">
      <el-form-item label="停工原因" prop="shutdownCause">
        <el-input
          v-model="formData.shutdownCause"
          style="width: 100%"
          maxlength="200"
          show-word-limit
          :autosize="{ minRows: 3 }"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="width: 92px; background-color: #f2f3f5" @click="handleCancel">取消 </el-button>
        <el-button style="width: 92px" :disabled="isLoading" type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { operateWork } from "@/apis/constructionPlan";
import { Close } from "@element-plus/icons-vue";
import { clientInfoAndFollow } from "@/apis/clientManager";

const route = useRoute();
const customerId = route.query.customerId;

const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue", "stopWorkSave"]);

const showStopWork = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

//表单相关
const formData = ref({
  customerId,
  shutdownCause: "",
  type: 1
});
const formRule = {
  shutdownCause: [{ required: true, message: "请输入停工原因", trigger: "blur" }]
};

const customerInfo = ref({});
const getCustomerInfo = async () => {
  const { data } = await clientInfoAndFollow(customerId);
  customerInfo.value = data;
};

//按钮操作
const isLoading = ref(false);
const handleCancel = () => {
  formData.value.shutdownCause = "";
  showStopWork.value = false;
};
const handleConfirm = () => {
  proxy.$refs.formRef.validate(async valid => {
    if (!valid) return proxy.$modal.msgError("请完善信息");
    try {
      isLoading.value = true;
      const res = await operateWork(formData.value);
      proxy.$modal.msgSuccess(res?.msg ?? "");
      showStopWork.value = false;
      emit("stopWorkSave");
    } catch (err) {
      isLoading.value = false;
    }
  });
};

getCustomerInfo();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.header {
  display: flex;
  justify-content: space-between;
}
.customer-info {
  font-size: 14px;
  color: #86909c;
  margin-bottom: 20px;
}
.form {
  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper),
  :deep(.el-textarea__inner) {
    box-shadow: none;
    background: #f2f3f5;
  }
}
:deep(.el-input__count) {
  background: none !important;
}
</style>
